
<div class="span4 visconfig">

    {{ hook('visualize_before_sidebar', chart) }}

    <ul class="nav nav-tabs visualize-nav-tabs" data-target="tab-container">
        {% if type != "map" %}
            <li class="active"><a href="#vis" data-target="select-visualization">{% trans "Chart type" %}</a></li>
        {% endif %}

        <li class="{% if type == "map" %}active{% endif %}"><a href="#refine" data-target="refine-the-chart">{% trans "Refine" %}</a></li>
        <li ><a href="#story" data-target="annotate">{% trans "Annotate" %}</a></li>
        <li ><a href="#design" data-target="design">{% trans "Design" %}</a></li>
    </ul>

    <div class="" style="padding-top: 20px">

        <div class="tab-container">

            {% if type != "map" %}
            <div class="section select-visualization">
                <div class="vis-selector-unfolded">
                {# <h3>{% trans "Select visualization" %}</h3> #}
                    <div class="vis-thumbs">
                        {% for vis in visualizations %}{% if vis['svelte-workflow'] == 'chart' and vis.namespace != 'map' and vis.id not in config.vis_archive %}{% if vis.title %}
                        <div class="vis-thumb{% if vis.id == chart.type %} active{% endif %}" data-id="{{ vis.id }}" data-title="{{ vis.title }}" data-static-path="{{ vis.__static_path }}">
                            {{ vis.icon | raw }}
                            <div class="title">{{ vis.title | raw }}</div>
                        </div>
                        {% endif %}{% endif %}{% endfor %}
                    </div>

                    {% if config.vis_archive %}
                    <div class="vis-archive-select">
                        {% trans "visualize / vis archive" %} <select>
                            <option value="---">{% trans "" %}</option>
                        {% for vis in visualizations %}{% if vis['svelte-workflow'] == 'chart'  and vis.namespace != 'map' and vis.id in config.vis_archive %}
                        {% if vis.title %}
                            <option {% if vis.id == chart.type %} selected="selected" {% endif %}value="{{ vis.id }}">{{ vis.title | raw }}</option>
                        {% endif %}{% endif %}{% endfor %}
                        </select>
                    </div>
                    {% endif %}

                </div>

                <p>
                    <b>{% trans "Hint" %}:</b> {{ "visualize / transpose-hint" | trans | replace({'[LINK]': '<a href="#"
                     id="btn-transpose"><img style="height:14px" src="/static/css/chart-editor/transpose.png" /> ', '[/LINK]': '</a>' }) | raw }}
                </p>

            </div>
            {% endif %}

            <div class="section annotate">
                {# <h3>{% trans "Tell the story" %}</h3> #}

                <div class="story">
                    <div class="vis-options form-horizontal vis-options-annotate">
                        {% include "chart/visualize/annotate.twig" %}
                    </div>

                </div>

            </div>

            {# visualization specific options #}

            <div class="section refine-the-chart">
                {# <h3>{% trans "Refine the chart" %}</h3> #}

                <div class="form-horizontal vis-options vis-options-refine">

                    {% include 'chart/visualize/options.twig' %}

                </div>
            </div>

            <div class="section design">

                {{ hook('visualize_before_theme_selector') }}

                <div style="">
                    <label class="pull-left" style="padding-right:1ex;line-height:28px" for="select-theme">{% trans "Select layout:" %}</label>
                    <select id="select-theme" class="span2">
                        {% for theme in themes %}
                        <option value="{{ theme.id }}">{{ theme.title }}</option>
                        {% endfor %}
                    </select>
                </div>

                {{ hook('visualize_after_theme_selector') }}

            </div>

        </div>


        <div class="btn-group buttons">
            <a class="btn submit btn-stepback" href="describe"><i class="fa fa-chevron-left fa-fw icon-btn-left"></i> {% trans "Back" %}</a>
            <a class="btn btn-tabback" href="#"><i class="fa fa-chevron-left fa-fw icon-btn-left"></i> {% trans "Back" %}</a>

            <a href="publish" class="submit btn btn-primary btn-lrge publish-btn" id="visualize-proceed">{% trans "Publish" %} <i class="fa fa-chevron-right fa-fw icon-btn-right"></i></a>
            <a href="#proceed" class=" btn btn-primary proceed-btn">{% trans "Proceed" %} <i class="fa fa-chevron-right fa-fw icon-btn-right"></i></a>
        </div>

        <div class="clearfix"></div>
    </div>
</div>
